import {onMounted} from "vue";

export function useAnimatedUserinfo(dom: HTMLElement) {
    console.log(dom)
    //获取滚动条的高度
    onMounted(() => {
        window.addEventListener('scroll', handleScroll)
    })

    //判断某元素是否在可视区域
    function isInViewport(el) {
        const rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }
    const handleScroll = () => {
        console.log(isInViewport(dom))
        if (!isInViewport(dom)) {
            dom.style.position = 'fixed';
        } else {
            dom.style.position = 'relative';
        }
    }
}